<template>
  <div class="container">
    <el-card shadow="never" class="card">
      <!-- 表单 -->
      <el-form :model="questionForm" ref="questionForm">
        <!-- 第一行 -->
        <el-row>
          <!-- 搜索框 -->
          <el-col :span="6">
            <strong style="with: 90px">关键字</strong>
            <el-input
              placeholder="根据编号搜索"
              clearable
              :style="{ width: '260px', marginLeft: '20px' }"
              v-model="questionForm.keyword"
            ></el-input>
            <!-- 占位盒子 -->
          </el-col>
          <el-col :span="12">
            <div class="yc">占位</div>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6">
            <!-- 搜索按钮 -->
            <el-button class="search" type="primary" @click="handleSearch"
              >搜索</el-button
            >
            <!-- 清除按钮 -->
            <el-button class="del" @click="clearInput">清除</el-button>
          </el-col>
        </el-row>
        <!-- alter弹窗提示 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
      </el-form>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="230"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <!-- 插槽 用来判断试题类型 -->
          <template slot-scope="scope">
            <span :type="scope.row.questionType">{{
              scope.row.questionType | fStatusType
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="230ox" label="题目编号">
          <!-- 插槽 用来渲染题目编号 -->
          <template slot-scope="scope">
            <!-- 遍历数组 拿到每一项的id和number -->
            <p
              style="color: blue"
              @click="showQuestionIDs(item.id)"
              v-for="(item, index) in scope.row.questionIDs"
              :key="index"
            >
              {{ item.number }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间"></el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="录入人"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" width="80">
          <!--插槽 删除按钮 -->
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              circle
              plain
              @click="deleteQuest(scope.row.id)"
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <template>
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="questionForm.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="20"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </template>
    </el-card>
    <!-- 题目详情对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="isShowQuestionIDs"
      width="70%"
      :before-close="showQuestionIDsclose"
    >
      <el-row :gutter="20">
        <!-- 题型 -->
        <el-col :span="6">
          【题型】：
          <!-- 判断题目类型 -->
          <template>
            <span :type="questionData.questionType">{{
              questionData.questionType | fStatusType
            }}</span>
          </template>
        </el-col>
        <!-- 编号 -->
        <el-col :span="6">
          【编号】：
          <span v-text="questionData.id"></span>
        </el-col>
        <!-- 难度 -->
        <el-col :span="6">
          【难度】:

          <!-- 用来判断试题难度 -->
          <template>
            <span :type="questionData.difficulty">{{
              questionData.difficulty | fStatusDiff
            }}</span>
            <!-- <span v-if="questionData.difficulty == 1">简单</span>
            <span v-else-if="questionData.difficulty == 2">一般</span>
            <span v-else-if="questionData.difficulty == 3">困难</span>
            <span v-else>待定</span> -->
          </template>
        </el-col>
        <!-- 标签 -->
        <el-col :span="6">
          【标签】:
          <span v-text="questionData.tags"></span>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="marginTop:15px">
        <!-- 学科 -->
        <el-col :span="6">
          【学科】：
          <span v-text="questionData.subjectName"></span>
        </el-col>
        <!-- 目录 -->
        <el-col :span="6">
          【目录】:
          <span v-text="questionData.directoryName"></span>
        </el-col>
        <!-- 方向 -->
        <el-col :span="6">
          【方向】:
          <span v-text="questionData.direction"></span>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="6" style="marginBottom:10px">【题干】：</el-col>
      </el-row>
      <!-- 题目渲染 -->
      <!-- 单选 -->
      <radio :qsdata="questionData" v-if="questionData.questionType == 1" />
      <!-- 多选 -->
      <checkout
        :qsdata="questionData"
        v-else-if="questionData.questionType == 2"
      />
      <!-- 简答 -->
      <shortanswer
        :qsdata="questionData"
        v-else-if="questionData.questionType == 3"
      />
      <el-divider></el-divider>
      <p>
        【参考答案】：
        <el-button type="danger" size="mini" @click="showVideo"
          >视频答案预览</el-button
        >
      </p>

      <div>
        <!-- 视频 -->
        <video
          :class="{ videoStuts: isVideo }"
          width="320"
          height="240"
          :src="questionData.videoURL"
          controls="controls"
          ref="refVideo"
        ></video>
      </div>
      <el-divider></el-divider>
      <p>
        【答案解析】：
        <a
          target="blank"
          :href="questionData.answer | fliterLink | fliterStr"
          >{{ questionData.answer | fliterLink }}</a
        >
      </p>
      <el-divider></el-divider>
      <p>
        【题目备注】：
        <span v-text="questionData.remarks"></span>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showQuestionIDsclose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms as getQuestion, detail, remove } from "@/api/hmmm/questions";
import radio from '../components/randoms/radio'
import checkout from '../components/randoms/checkout'
import shortanswer from '../components/randoms/shortanswer'

export default {
  components: {
    radio, // 单选
    checkout, // 多选
    shortanswer, // 简答
  },
  data () {
    return {
      tableData: [], // 表格中的数据
      questionForm: {
        page: 1, // 当前页
        pagesize: 20, // 每页多少条
        keyword: "", // 关键字
      },
      tableKey: "",
      alertText: "", // 保存弹框提示中的文字信息
      isVideo: "1", // 视频状态位 默认隐藏
      checkList: "", // 题目详情复选框 选中数据
      isShowQuestionIDs: false, // 试题详情弹框默认关闭
      currentPage4: 1, // => 当前页码
      questionData: {}, // 试题详情
      total: 178, // 保存总条数total //假数据--->178
    };
  },
  filters: {
    // 过滤所有标签
    fliterLink: function (value) {
      const reg = new RegExp('<[^>]+>', 'gi');
      if (typeof value != 'string') {  //不是字符串
        return value;
      }
      return value.replace(reg, '');
    },
    //过滤所有汉字
    fliterStr: function (value) {
      const reg = new RegExp("[\u4e00-\u9fa5]", 'gi')
      if (typeof value != 'string') {  //不是字符串
        return value;
      }
      return value.replace(reg, '');
    },
    // 过滤试题难度
    fStatusDiff (status) {
      const texts = {
        1: '简单',
        2: '一般',
        3: '困难',
      }
      // 通过[]来取对象的属性值
      return texts[status]
    },
    // 过滤试题类型
    fStatusType (status) {
      const texts = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return texts[status]
    }
  },
  methods: {
    // 获取列表数据
    async getList () {
      try {   
      const res = await getQuestion(this.questionForm);
      console.log(res.data.items);
      this.tableData = res.data.items; // 获取数据
      // this.total = res.data.counts; // 获取总条数
      this.alertText = `数据一共${this.total}条`; // 显示到提示消息中}
      }catch(err){
        console.log(err)
      }
    },

    // 关键字搜索功能
    handleSearch () {
      this.questionForm.page = 1; // 回到第一页
      this.getList(); // 重新加载数据
    },
    // 清除按钮功能
    clearInput () {
      this.questionForm.keyword = ""; // 清除关键字
      this.getList(); // 重新加载数据
    },
    // 分页功能
    handleSizeChange (val) {
      // 每页显示条数
      console.log(`每页 ${val} 条`);
      this.questionForm.pagesize = val;
      if (this.questionForm.page === 1) {
        // 如果当前是第一页 重新加载数据
        this.getList();
      }
    },
    // 当前页数
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.questionForm.page = val;
      this.getList();
    },
    // 删除题目
    async deleteQuest (id) {
      const ret = await remove(id);
      // 用于获取新数据 //用于造假 页面刷新
      const params = {
        page: 2, // 当前页
        pagesize: 20,
      };
      //删除确认框
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.questionForm.page =2
          this.getList();
          this.total -= 1;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //  试题详情 弹出对话框
    async showQuestionIDs (ids) {
      // this.$refs.refVideo.load()
      this.isShowQuestionIDs = true; // 显示对话框
      const res = await detail({ id: ids }); // 此时ids传入的是遍历之后的每一项的id 即 item.id
      this.questionData = res.data;
      console.log(res, 'res');
    },
    // 展开 答案解析视频
    showVideo () {
      this.isVideo = 0; // 显示视频
    },
    // 试题详情 关闭对话框
    showQuestionIDsclose () {
      this.isShowQuestionIDs = false; // 关闭对话框
      this.questionData = {}; // 置空对话框数据
      this.$refs.refVideo.pause(); // 暂停视频播放
      this.isVideo = true; // 隐藏视频
    },
  },
  created () {
    this.getList();
  },
};
</script>

<style scoped lang='scss'>
.yc {
  visibility: hidden;
}
.container {
  padding: 12px 10px;
}
.del {
  float: right;
  margin: 0 15px;
}
.search {
  float: right;
}
.alert {
  margin: 15px 0;
}
.pagination {
  margin-top: 15px;
}
.el-checkbox {
  display: block;
  margin: 5px;
}
.videoStuts {
  display: none;
}
</style>
